<template>
  <div class="monitor_page">
    <!-- table -->
    <el-card class="monitor_page-left" :class="{toggle: isToggleStatus}" shadow="always">
      <div class="filter_header">
        <el-form ref="form" label-width="100px">
          <div class="monitor_page-filter" v-show="!isToggleStatus">
            <el-form-item label="起止时间：">
              <el-date-picker
                v-show="!isToggleStatus"
                style="width:100%;min-width:240px"
                size="small"
                value-format="timestamp"
                v-model="timerArray"
                type="datetimerange"
                :picker-options="pickerOptions"
                :clearable="false"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="monitor_page-filter flex-between filter_select" v-show="!isToggleStatus">
            <el-form-item label="筛选条件：" style="margin-right: 20px">
              <el-select
                v-model.trim="compareTypeModel"
                size="small">
                <el-option
                  v-for="item in compareTypes"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="60px" label="数值：" style="margin-right: 20px">
              <el-input type="number" v-model="compareValModel" placeholder="可输入" size="small" style="width: 60%">
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <div class="monitor_page-filter flex-between" :class="{setMarginTop: isToggleStatus}">
          <div class="monitor_page-filter-left">
            <button class="toggle_wrap" @click="toggleStatus">
              <i class="el-icon-s-fold" :class="{rotate: isToggleStatus}"></i>
            </button>
            <div v-show="!isToggleStatus">
              <el-button
                size="small"
                @click="confirmDelete"
                icon="el-icon-delete-solid"
                v-if="hasPermission('monitor:record:del')"
                type="danger">删除
              </el-button>
              <el-button
                size="small"
                plain
                v-if="hasPermission('monitor:record:clean')"
                icon="el-icon-s-tools"
                type="primary"
                @click="showMonitorResetDialog('inRealAngle','compensateInAngle')">设备重置
              </el-button>
              <el-button
                size="small"
                plain
                v-if="hasPermission('monitor:record:clean')"
                icon="el-icon-s-tools"
                type="primary"
                @click="showMonitorResetWaringDialog('compensateInAngle',)">预警值重置
              </el-button>
              <el-button
                size="small"
                plain
                v-if="hasPermission('monitor:record:mark')"
                type="primary"
                @click="showMonitorRemarkDialog">说明
              </el-button>
              <el-button
                size="small"
                style="margin-top: 10px"
                plain
                v-if="jiuGanKeJi"
                type="primary"
                @click="lookEquipRecord(timerArray,equipId)">运行日志
              </el-button>
              <el-button
                size="small"
                plain
                v-if="hasPermission('monitor:record:export')"
                @click="$emit('export')"
                icon="el-icon-download"
                type="primary">数据导出
              </el-button>
            </div>
          </div>
          <el-button
            v-show="!isToggleStatus"
            size="small"
            type="primary"
            class="common_btn-defalut"
            icon="el-icon-search"
            @click="form.page=1;$emit('update')">搜索
          </el-button>
        </div>
      </div>
      <!-- table -->
      <el-table
        v-show="!isToggleStatus"
        :data="tableList"
        border
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        tooltip-effect="dark">
        <el-table-column type="selection" width="28">
        </el-table-column>
          <el-table-column prop="createTime" label="数据采集时间" min-width="135">
            <template slot-scope="scope">
              {{scope.row.createTime | formatTimer }}
            </template>
          </el-table-column>
          <el-table-column v-if="activeName=='1'" prop="compensateInAngle" label="相对倾角(°)" min-width="100"></el-table-column>
        <el-table-column prop="xyAngle" v-else label="XY偏移角度(°)" min-width="100"></el-table-column>
          <el-table-column  v-if="activeName=='1'" prop="azRealAngle" label="方位角(°)" min-width="100"></el-table-column>
        <el-table-column  v-else prop="xyAngleSpeed" label="XY变化速率(°/h)" min-width="100"></el-table-column>


        <!--        <el-table-column v-if="workPointTypeIsBuilding" prop="xyDisplacement" label="偏移位移(mm)" min-width="120">-->
        <!--        </el-table-column>-->
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-show="!isToggleStatus"
        :disabled="isToggleStatus"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
        :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
        layout="sizes, prev, pager, next,jumper"
        :total="form.total">
      </el-pagination>
    </el-card>

    <!-- 绘图部分 -->
    <div class="monitor_page-right">
      <el-tabs type="border-card" v-model="activeName" @tab-click="clickTab" style="height: 70vh;overflow-y: auto;">
        <el-tab-pane label="倾角-方位角" name="1">
          <el-card class="card_echarts" shadow="hover">
            <echarts-eight-change ref="echartsChange1"></echarts-eight-change>
          </el-card>

        </el-tab-pane>
        <el-tab-pane label="X-Y-XY" name="2" >
          <el-card class="card_echarts " shadow="hover">
            <echarts-eight-old ref="echartsOld1"></echarts-eight-old>
          </el-card>
          <el-card class="card_echarts " shadow="hover">
            <echarts-eight-rate ref="echartsRate1"></echarts-eight-rate>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>

    <dialog-remark ref="remark" @update="$emit('update')"></dialog-remark>
    <monitor-remark ref="monitorRemark" @update="$emit('update')"></monitor-remark>
    <monitor-reset ref="monitorReset" @update="$emit('update')"></monitor-reset>
  </div>
</template>

<script>
  import EchartsEightChange from '../monitor-echarts/base/echarts-8-change'
  import EchartsEightOld from '../monitor-echarts/base/echarts-8-change-old'
  import EchartsEightRate from '../monitor-echarts/base/echarts-8-change-rate'
  import ItemMixins from './item.mixins'

  export default {
    mixins: [ItemMixins],
    props: ['compareTypes', 'compareType', 'compareVal'],
    components: {EchartsEightChange, EchartsEightOld, EchartsEightRate},
    data() {
      return {
        activeName: "1",
        // 当前的图表钩子
        chartsName: ['echartsChange1', 'echartsOld1', 'echartsRate1'],
        // 分页参数
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        isShowDialog: false,
      }
    },
    computed: {
      compareTypeModel: {
        get() {
          return this.compareType;
        },
        set(value) {
          this.$emit("update:compareType", value);
        },
      },
      compareValModel: {
        get() {
          return this.compareVal;
        },
        set(value) {
          this.$emit("update:compareVal", value);
        },
      },
      //工点类型是否是建筑物，建筑物不展示边坡相关的信息
      // workPointTypeIsBuilding() {
      //   const {
      //     workPointId
      //   } = this.$route.params
      //   const info = store.workPointList.find(x => x.id === workPointId) || {}
      //   return info.bianpiType === 6
      // },
    },
    methods: {
      //tab 切换进行echart随着窗口改变方法，让数据重新渲染，
      clickTab() {
        this.chartsName.map((name) => {
          if (this.$refs[name]) {
            this.$nextTick(() => {
              this.$refs[name].echartResize();
            });
          }
        });

      },
      // 数据刷新
      update({data, monitorName, monitorInfo}) {
        this.equipId = monitorInfo.bindEquipId
        this.collectionList = data.recordList
        this.form.page = 1;
        this.form.total = this.collectionList.length
        // if (!this.jiuGanKeJi) {
        //   //真实倾角为空的，倾角不展示,获取真实倾角为0的下标
        //   let indexList = []
        //   data.recordList.map((x, index) => {
        //     if (x.inRealAngle === 0) {
        //       indexList.push(data.recordList.length - 1 - index)
        //     }
        //   })
        //   //过滤掉真实倾角为0的下标元素
        //   data.compensateInAngle = data.compensateInAngle.filter((x, index) => indexList.indexOf(index) === -1)
        //   //列表也不展示真实倾角为0 的数据
        //   this.collectionList = data.recordList.filter((x) => x.inRealAngle !== 0)
        //   indexList.map(x => {
        //     //过滤掉真实倾角为0的下标元素
        //     this.collectionList.splice(x, 1)
        //     //列表和绘图数据是反向的，所以索引是反向的
        //     data.compensateInAngle.splice(data.recordList.length - 1 - x, 1)
        //   });
        // }
        this.chartsName.map(async name => {
          this.$refs[name].updateEchart(data, monitorName, this.jiuGanKeJi, monitorInfo)
        })
      }
    }
  }
</script>

<style scoped="scoped" lang="less">

  @import url('./commom.less');

  // 还需自定义的css
  .card_echarts {
    height: 550px;
  }

  .monitor_page-left {
    border: 1px solid #c00003;
  }

  .el-card {
    background: transparent;
  }
</style>
